<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>实时人数变动</title>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="div1"   style="height:400px;width: 800px;"></div>
    <div id="div2"   style="height:400px;width: 500px;"></div>
    <!-- ECharts单文件引入 -->	
    <script src="../js/echarts.js"></script>
    <script src="../js/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
            	 echarts: '../js'
            }
        });
        
        // 使用
        require(
            [
              'echarts',
              'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
              'echarts/chart/pie',//  饼状图  pie
              'echarts/chart/funnel',//漏斗
              'echarts/chart/line',
               'echarts/chart/map',//地图
 /*             'echarts/chart/heatmap', //热力
              'echarts/chart/gauge',//仪表
              'echarts/chart/tree',
              'echarts/chart/line', */
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('div1'));
                var  app = new Object();
                app.timeTicket;
                app.count = 11;
                option = {
                    title: {
                        text: '动态数据',
                        subtext: '纯属虚构'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data:['最新成交价', '预购队列']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    dataZoom: {
                        show: false,
                        start: 0,
                        end: 100
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: (function (){
                                var now = new Date();
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
                                    now = new Date(now - 2000);
                                }
                                return res;
                            })()
                        },
                        {
                            type: 'category',
                            boundaryGap: true,
                            data: (function (){
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.push(len + 1);
                                }
                                return res;
                            })()
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            scale: true,
                            name: '价格',
                            max: 30,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        },
                        {
                            type: 'value',
                            scale: true,
                            name: '预购量',
                            max: 1200,
                            min: 0,
                            boundaryGap: [0.2, 0.2]
                        }
                    ],
                    series: [
                        {
                            name:'预购队列',
                            type:'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data:(function (){
                                var res = [];
                                var len = 10;
                                while (len--) {
                                    res.push(Math.round(Math.random() * 1000));
                                }
                                return res;
                            })()
                        },
                        {
                            name:'最新成交价',
                            type:'line',
                            data:(function (){
                                var res = [];
                                var len = 0;
                                while (len < 10) {
                                    res.push((Math.random()*10 + 5).toFixed(1) - 0);
                                    len++;
                                }
                                return res;
                            })()
                        }
                    ]
                };
                clearInterval(app.timeTicket);
                app.count = 11;
                app.timeTicket=  setInterval(function (){
                    axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

                    var data0 = option.series[0].data;
                    var data1 = option.series[1].data;
                    data0.shift();
                    data0.push(Math.round(Math.random() * 1000));
                    data1.shift();
                    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);

                    option.xAxis[0].data.shift();
                    option.xAxis[0].data.push(axisData);
                    option.xAxis[1].data.shift();
                    option.xAxis[1].data.push(app.count++);

                    myChart.setOption(option);
                }, 2100);

                /*   var res = [];//value 数组
                   var name=[0,1,2,3,4,5,6,7];  //name  数组
                   var value=[100,200,150,150,200,180,200,170];

                   data = [{name:[0],value:[0]}];
                   option = {
                       title: {
                           text: '人数',
                           subtext: '纯属虚构'
                       },
                       tooltip: {
                           trigger: 'axis'
                       },

                       xAxis:  {
                         //  type: 'category',
                           boundaryGap: false,
                           splitLine: {
                               show: false
                           },
                           data:name
                       },
                       axisPointer: {
                           animation: false
                       },
                       yAxis: {
                           type: 'value',
                           axisLabel: {
                               formatter: '{value}人'
                           },
                           splitLine: {
                               show: false
                           },
                       },

                       series: [
                           {
                               name:'人数',
                               type:'line',
                               smooth: true,
                               data: value,

                           }
                       ]
                   };

                   // 为echarts对象加载数据
                   //myChart.showLoading();
                   myChart.setOption(option);
                  var m=7;
                   setInterval(function () {
               for(var i=0;i<name.length-1;i++){
                   name[i]=name[i+1];
                   value[i]=value[i+1];
               }
                       value[7]=200+((i%2==0?1:-1)*Math.random()*200)
                       name[7]=m++;
               for(var i=0;i<name.length;i++){
                       res.push({
                           name:name[i],
                           value:value[i]
                       });

               }

                       myChart.setOption({
                           series: [{
                               data: value
                           }],

                       });

                   }, 1000);
   */

            });


    </script>
</body>
